<template>
	<view v-if="myInfo==''">
		<xbd-zwnz marginTop='200'></xbd-zwnz>
	</view>
	<view v-else class="center">
		<view class="card">
			<xbd-image-title v-if="type=='2'" :image="require('@/static/image/supervision/jdh.png')">
				<template v-slot:title>
					<view>
						{{myInfo.month| timeFormat('YYYY')}}年{{myInfo.month| timeFormat('M')}}月
						工资奖金分配上报
					</view>
				</template>
			</xbd-image-title>
			<xbd-image-title v-if="type=='1'" :title="title" :image="require('@/static/image/supervision/jdh.png')">
			</xbd-image-title>
			<xbd-image-title v-if="type=='0'" :title="myInfo.name"
				:image="require('@/static/image/supervision/jdh.png')">
			</xbd-image-title>
			<view v-if="type==='0'">
				<view class="tag">
					招待类型
				</view>
				<view class="text">
					{{myInfo.type}}
				</view>
				<view class="tag">
					招待单位
				</view>
				<view class="text">
					{{userInfo.department}}
				</view>
				<view class="tag">
					来宾人数
				</view>
				<view class="text">
					{{myInfo.guest}}人
				</view>
				<view class="tag">
					预计费用
				</view>
				<view class="text">
					{{myInfo.cost | priceFormat(0,'￥',true)}}
				</view>
				<view class="tag">
					招待时间
				</view>
				<view class="text">
					<text>{{myInfo.start_time | timeFormat('YYYY-MM-DD')}}</text><text
						style="margin: 0 20rpx; color: #A0A7B8;">至</text><text>{{myInfo.end_time | timeFormat('YYYY-MM-DD')}}</text>
				</view>
				<view class="tag">
					接待申请及业务联系单
				</view>
			</view>

			<view v-if="type==='1'">
				<view class="tag">
					提交人
				</view>
				<view class="text">
					{{myInfo.report_name}}
				</view>
				<view class="tag">
					所在单位
				</view>
				<view class="text">
					{{userInfo.department}}
				</view>
				<view class="tag">
					报销金额
				</view>

				<view class="text" v-if="myInfo.engineeing!==0">
					<view class="text_left">工程款报销</view> {{myInfo.engineeing | priceFormat(0,'￥',true)}}
				</view>
				<view class="text" v-if="myInfo.lend!==0">
					<view class="text_left">借款报销</view> {{myInfo.lend | priceFormat(0,'￥',true)}}
				</view>
				<view class="text" v-if="myInfo.travel!==0">
					<view class="text_left">差旅报销</view> {{myInfo.travel | priceFormat(0,'￥',true)}}
				</view>
				<view class="tag">
					费用报销单及相关单据
				</view>
			</view>

			<view v-if="type==='2'">
				<view class="tag">
					所在单位
				</view>
				<view class="text">
					{{myInfo.department}}
				</view>
				<view class="tag">
					合计工资
				</view>
				<view class="text">
					{{myInfo.salary | priceFormat(0,'￥',true)}}
				</view>
				<view class="tag">
					合计奖金
				</view>
				<view class="text">
					{{myInfo.reward | priceFormat(0,'￥',true)}}
				</view>
				<view class="tag">
					发放月份
				</view>
				<view class="text">
					{{myInfo.month | timeFormat('YYYY-MM')}}
				</view>

				<view class="tag">
					工资表及奖金分配表
				</view>
			</view>

			<view class="text" v-if="myInfo.evidence && myInfo.evidence.length!==0">
				<view class="image"v-if="showImg(myInfo.evidence).length !== 0">
					<view class='attachment' >
						<image v-for="(items,index) in showImg(myInfo.evidence)" :key='index' class="image"
							:src="showImg(myInfo.evidence)[index].url" @click="image_click(items.url)"></image>
					</view>
				</view>
				<view v-else style="font-size: 30rpx;font-weight: 400;color: #000623; margin-bottom: 0;">
					文件请在PC端查看
				</view>
			</view>
			<view v-else>
				-
			</view>



			<view v-if="type!=='1' ">
				<view class="tag">
					提交人
				</view>
				<view class="text">
					{{myInfo.report_name}}
				</view>
			</view>
			<view class="tag">
				上报时间
			</view>
			<view class="text">
				{{myInfo.report_time | timeFormat('YYYY-MM-DD HH:mm')}}
			</view>
		</view>

		<view class="card" v-if="myInfo.state!=='wait'">
			<image class="img" v-if="myInfo.state === 'refused'" src="@/static/image/supervision/bhg.png"></image>
			<image class="img" v-if="myInfo.state === 'successed'" src="@/static/image/supervision/hg.png"></image>
			<image class="img" v-if="myInfo.state === 'wait'" src="@/static/image/supervision/dsc.png"></image>
			<view class="tag">
				审查人
			</view>
			<view class="text">
				{{myInfo.audit_name}}
			</view>
			<view class="tag">
				审查意见
			</view>
			<view class="text">
				{{myInfo.view || '-'}}
			</view>
			<view class="tag">
				审查时间
			</view>
			<view class="text">
				{{myInfo.audit_time | timeFormat('YYYY-MM-DD HH:mm')}}
			</view>
		</view>
		<xbd-button v-if="myInfo.state==='wait'" text="取消上报" @clickBtn="cancelReport()"></xbd-button>
		<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel"
			content="将撤回所有已上报内容，确定取消上报？" cancelText="取消" confirmText="确定"></xbd-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		Supervision
	} from '@/api/index.js';
	export default {
		data() {
			return {
				flag: true,
				id: '',
				title: '',
				type: '',
				showDialog: false,
				detailVal: '',
				reportVal: '',
				myInfo: ''
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// 筛选数组中的图片
			showImg(arr) {
				console.log(arr, 'arr')
				let a = []
				if (arr.length !== 0) {
					for (let i = 0; i < arr.length; i++) {
						console.log(arr, 'arr')
						if (arr[i].url.indexOf(".png") !== -1 || arr[i].url.indexOf(".jpg") !== -1 || arr[i].url.indexOf(
								".jpeg") !== -1) {

							a.push(arr[i])
						}
					}
				}
				console.log(a, 'a')
				return a
			},
			dialogConfirm() {
				this.flag = false
				this.report()
				this.showDialog = false
			},
			dialogCancel() {
				this.showDialog = false
			},
			cancelReport() {
				this.showDialog = true
			},
			image_click(img) {
				// 点击预览图片
				console.log('res')
				dd.previewImage({
					current: 1,
					urls: [img]
				});
			},
			async report() {
				const res = await Supervision.postReport(this.id, this.reportVal)
				console.log(res, 'res')
				if (res.success) {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500)
					uni.$emit('update', this.id)
				} else {
					this.flag = true
				}
				if (res.code == 90007) {
					uni.$emit('update', this.id);
				}
				if (res.code == 10001) {
					uni.$emit('updateList');
				}
				this.$showToast(res.msg);
			},
			async init() {
				const res = await Supervision.getDetail(this.id, this.detailVal)
				if(res.success){
					this.myInfo = res.data
					this.title = this.myInfo.report_name + ' - 财务报销上报'
				}else{
					this.$showToast(res.msg);
				}
				console.log(res, 'res')
				
			}
		},
		onLoad(res) {
			this.id = res.id
			this.type = res.type
			if (this.type == '0') {
				this.reportVal = '/pc/service-report-cancel'
				this.detailVal = '/pc/service-detail'
			} else if (this.type == '1') {
				this.reportVal = '/pc/value-report-cancel'
				this.detailVal = '/pc/value-detail'
			} else {
				this.reportVal = '/pc/salary-report-cancel'
				this.detailVal = '/pc/salary-detail'
			}
			this.init()
		}
	}
</script>

<style lang="scss">
	.center {
		padding: 32rpx;

		.card {
			position: relative;
			border-radius: 12rpx;
			background-color: #FFFFFF;
			padding: 32rpx;
			margin-bottom: 30rpx;

			.img {
				position: absolute;
				top: 100rpx;
				right: 60rpx;
				width: 100rpx;
				height: 88rpx;
			}

			.tag {
				font-size: 26rpx;
				font-weight: 400;
				color: #a0a7b8;
				margin-bottom: 20rpx;
			}

			.text {
				display: flex;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				color: #000623;
				margin-bottom: 40rpx;
				white-space: pre-line !important;
				word-break: break-all !important;
				word-wrap: break-word;
				.text_left {
					width: 160rpx;
					margin-right: 30rpx;
				}
			}
		}

		.image {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.attachment {
				display: flex;
				flex-wrap: wrap;

				.image {
					width: 124rpx;
					height: 124rpx;
					margin-right: 20rpx;
					margin: 10rpx 20rpx 10rpx 0;

					&:nth-child(3n) {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
